<!DOCTYPE html>
<html style="height: calc(100% - 10px);">
<head>
    <meta charset="utf-8">
    <title>首页三</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/admin/layui/css/layui.css" media="all">
</head>
<style>
    .list{
        display: block;
        list-style-type: disc;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
    }
    .list-item{
        height: 32px;
        line-height: 32px;
        color: gray;
        padding: 5px;
        padding-left: 15px;
        border-radius: 4px;
        margin-top: 5.2px;
    }
    .layuiadmin-card-status dd {
        padding: 15px 0;
        border-bottom: 1px solid #EEE;
        display: -webkit-flex;
        display: flex;
    }
    .pear-container {
        margin: 10px;
        background-color: #e2e2e2;
        height: 100%;
    }
    .list .list-item {
        height: 32px;
        line-height: 32px;
        color: gray;
        padding: 5px;
        padding-left: 15px;
        border-radius: 4px;
        margin-top: 5.2px;
    }
    .low{
        color: #1e9fff;
        margin-left: 10px;
    }
    .in{
        color: #1e9fff;
        margin-left: 10px;
    }
    .high{
        color: red;
        margin-left: 10px;
    }
    .bt{
        float: right;
        margin-top: 5px;
        margin-right: 10px;
    }
</style>
<body class="pear-container">
<div class="layui-row layui-col-space10" style="height: 100%;">
    <div class="layui-col-md9" style="height: 100%;background-color: white;">
        <div class="layui-tab layui-tab-card" style="height: calc(100% - 200px);overflow: scroll;overflow-x: hidden;">
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-card-body">
                        <dl class="layuiadmin-card-status">
                            {{ data_result | safe }}
                        </dl>
                    </div>
                </div>
            </div>
        </div>
        {% csrf_token %}
        <form class="layui-form">
            <div class="layui-tab layui-tab-card" style="height:120px;overflow: scroll;overflow-x: hidden;">
                <textarea placeholder="请输入回复内容" name="remark" lay-verify="remark"  class="layui-textarea" style="min-height: 200px;"></textarea>
            </div>
            <div style="height:50px;">
                <button class="layui-btn" lay-submit lay-filter="adminInfo" style="margin-top: 5px;margin-left: 30%;margin-bottom: 20px">回复</button>
                <button  type="button" class="layui-btn" onclick="javascript:history.back(-1);" style="margin-top: 5px;margin-left: 15%;margin-bottom: 20px">返回</button>
            </div>
        </form>
    </div>
    <div class="layui-col-md3" style="height: 100%;overflow: scroll;background-color: white;overflow-x: hidden;">
        <div class="layui-card">
            <div class="layui-card-header">活跃用户</div>
            <div class="layui-card-body">
                <ul class="list">
                    {{active_user | safe}}
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script src="/static/layui/layui.js" charset="utf-8"></script>
<script src="../../static/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../static/js/jquery.cookie.js"></script>
<script>
    layui.use(['form', 'layedit', 'laydate','element'], function() {
        var form = layui.form
            , layer = layui.layer;
        re_url = "{{url_data|safe}}";
        re_id = "{{re_id|safe}}";

        form.verify({
            remark: function(value){
                if(value.length < 1){
                    return '请填写回复内容';
                }else if (value.length > 256){
                    return '回复内容的长度不能超过256个字符';
                }
            }
        });

        form.on('submit(adminInfo)', function(data){
            var index = layer.load(2, {shade: [0.2, '#5B5B5B']});

            $.ajax({
                url: 'insert_feedback_detail',
                type: 'POST',
                data:{'key': 'insert_feedback_detail','base':data.field,'type':re_url,'re_id':re_id},
                headers:{'X-CSRFtoken':$.cookie('csrftoken')},
                success: function (base) {
                    if (base == 'true'){
                        layer.msg('操作成功！', {icon: 1});
                        //下面为跳出iframe框架的页面跳转
                        setTimeout("window.location.href=\"feedback.html\";", 1300 )
                    } else {
                        layer.close(index);
                        layer.msg('系统错误，请联系系统管理员！', {icon: 2});
                        setTimeout("window.location.reload();", 1300 )
                    }
                }
            })
            return false;
        });
    });
</script>